<template>
	<uni-popup type="bottom" ref="skuRef" background-color="#fff" :is-mask-click="false">
		<view class="goods-sku">
			<view class="goods">
				<image class="thumb"></image>
				<view class="info">
					<view class="name">商品名称</view>
					<view class="other">
						<text class="price">￥105</text>
						<text class="stock">库存：100</text>
					</view>
					<view class="selected">选中的是红色</view>
					<view class="icon-close" @click="close"><uni-icons type="close" size="20"></uni-icons></view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="spec-scroll">
				<view class="spec-list">
					<view class="spec-item">
						<view class="name">尺寸</view>
						<view class="values">
							<text class="value-item active">大</text>
							<text class="value-item">中</text>
							<text class="value-item">小</text>
						</view>
					</view>
					<view class="spec-item">
						<view class="name">颜色</view>
						<view class="values">
							<text class="value-item">红色</text>
							<text class="value-item">白色</text>
							<text class="value-item">棕色</text>
							<text class="value-item">棕色</text>
							<text class="value-item">棕色</text>
							<text class="value-item">棕色棕色2</text>
							<text class="value-item">棕色</text>
							<text class="value-item">棕色</text>
							<text class="value-item">米白</text>
						</view>
					</view>
				</view>

				<view class="count">
					<text class="label">数量</text>
					<uni-number-box></uni-number-box>
				</view>
			</scroll-view>
			<view class="btn-group">
				<c-button type="warning" block round>加入购物车</c-button>
				<c-button type="error" block round>立即购买</c-button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue';

	let skuRef = ref(null);

	function close() {
		skuRef.value.close();
	}

	function open() {
		skuRef.value.open();
	}

	defineExpose({
		close,
		open
	});
</script>

<style lang="scss">
	.goods-sku {
		display: flex;
		flex-direction: column;
		height: 55vh;
		.goods {
			@include f-between;
			position: relative;
			padding: $margin-24;
			.icon-close {
				position: absolute;
				right: 32rpx;
				top: 24rpx;
			}
			.thumb {
				width: 148rpx;
				height: 148rpx;
				background-color: $bg-color;
				border-radius: $radius-4;
			}
			.info {
				flex: 1;
				margin: 0 $margin-24;
				.name {
					@include ellipsis(2);
					color: $main-color;
				}
				.other {
					margin-top: $margin-12;
					.stock {
						margin-left: $margin-24;
						font-size: $font-24;
						color: $tips-color;
					}
					.price {
						color: $error-color;
					}
				}
				.selected {
					margin-top: $margin-8;
					font-size: $font-24;
					color: $tips-color;
				}
			}
		}

		.spec-scroll {
			flex: 1;
			overflow: hidden;
			.spec-list {
				.spec-item {
					padding: $margin-24;
					.name {
						color: $main-color;
					}
					.values {
						display: flex;
						flex-wrap: wrap;
						.value-item {
							margin-right: $margin-20;
							margin-top: $margin-20;
							padding: 0.4em 1em;
							background-color: $bg-color;
							border-radius: $radius-8;
							font-size: $font-24;
							color: $tips-color;
							&.active {
								background-color: $warning-color;
								color: $inverse-color;
							}
						}
					}
				}
			}
			.count {
				@include f-between;
				padding: $margin-24;
				.label {
					color: $main-color;
				}
			}
		}

		.btn-group {
			display: flex;
			justify-content: space-around;
			padding: $margin-24 $margin-16;
			.c-button {
				width: 45%;
			}
		}
	}
</style>
